@import url('http://fonts.googleapis.com/css?family=Kanit');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #333;
}

.star {
    width: 36px;
    height: 36px;
    position: absolute;
    left: calc(50% - 18px);
    top: calc(20vh - 22px);
    z-index: 2;
    background-color: #ffce54;
    // 剪切成polygon，五角星
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: 0.3s;
    &:hover {
        background: url('../../images/op1/1.jpg') no-repeat;
        background-size: cover;
        background-position: center;
        width: 50vw;
        height: 50vh;
        border-radius: 20px;
        clip-path: none;
        left: calc(50% - 25vw);
        &::before {
            content: 'Merry Christmas';
        }
    }
    &::before {
        content: '';
        position: absolute;
        top: 55vh;
        width: 100%;
        text-align: center;
        color: #555;
        font-size: 6vw;
        color: #555;
        font-size: 6vw;
        font-family: 'Kanit';
        font-weight: 900;
        white-space: nowrap;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 120px #fff, 0 0 180px #fff;
    }
}
ul {
    padding: 0;
    li {
        list-style: none;
    }
}
.tree li {
    position: absolute;
    top: 20vh;
    right: 50%;
    width: 1px;
    height: var(--h);
    background: linear-gradient(transparent, rgba(46, 204, 113, 0.35));
    transform-origin: 50% 0;
    animation: swing 4s ease-in-out infinite;
    animation-delay: var(--d);
    &::before {
        content: '';
        position: absolute;
        left: -1px;
        bottom: -1px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: red;
    }
    &:nth-child(4n)::before {
        background-color: #d8334a;
    }
    &:nth-child(4n + 1)::before {
        background-color: #ffce54;
    }
    &:nth-child(4n + 2)::before {
        background-color: #2ecc71;
    }
    &:nth-child(4n + 3)::before {
        background-color: #5d9cec;
    }
}
@keyframes swing {
    0%,
    100% {
        transform: rotateZ(-30deg);
    }
    5%,
    45% {
        opacity: 0.25;
    }
    50%,
    100%,
    0% {
        opacity: 1;
    }
    50% {
        transform: rotateZ(30deg);
    }
}
